﻿<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

    <div th:replace="home/module/_header"></div>

    <!-- Main Slider With Form -->
    <section class="site-slider">
        <div id="siteslider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#siteslider" data-slide-to="0" class="active"></li>
                <li data-target="#siteslider" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active" style="background-image: url('/static/front/img/slider/1.jpg')">
                    <div class="overlay"></div>
                </div>
                <div class="carousel-item" style="background-image: url('/static/front/img/slider/2.jpg')">
                    <div class="overlay"></div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#siteslider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#siteslider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="slider-form">
            <div class="container">
                <div class="text-center mb-5">
                    <h6 class="subtitle mb-1 mt-0 text-shadow text-dark">发现租房市场上的最佳报价。
                    </h6>
                    <h1 class="display-4 mt-0 font-weight-bold text-shadow">让我们带你回家吧

                    </h1>
                </div>
                <form method="GET" action="/house">

                    <div class="row no-gutters">
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="mdi mdi-map-marker-multiple"></i></div>
                                <input class="form-control" name="houseTitle" placeholder="请输入关键字" type="text">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="mdi mdi-google-maps"></i></div>
                                <select class="form-control select2 no-radius" name="cityId">
                                    <option value="">城市</option>
                                    <option th:value="${city.id}" th:selected="${city.id == (session.city != null ? session.city.id : -1)}" th:each="city : ${cityList}">[[${city.cityName}]]</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="mdi mdi-security-home"></i></div>
                                <select class="form-control select2 no-radius" name="cateId">
                                    <option value="">类型</option>
                                    <option th:value="${category.id}" th:each="category : ${categoryList}">[[${category.cateName}]]</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="mdi mdi-security-home"></i></div>
                                <select class="form-control select2 no-radius" name="area">
                                    <option value="">面积</option>
                                    <option value="0-20">20m²以下</option>
                                    <option value="20-40">20-40m²</option>
                                    <option value="40-60">40-60m²</option>
                                    <option value="60-80">60-80m²</option>
                                    <option value="80-100">80-100m²</option>
                                    <option value="100-200">100-200m²</option>
                                    <option value="200-10000">200²以上</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <div class="input-group-addon"><i class="mdi mdi-security-home"></i></div>
                                <select class="form-control select2 no-radius" name="price">
                                    <option value="">价格</option>
                                    <option value="0-1000">1000元/月以下</option>
                                    <option value="1000-2000">1000元-2000元/月</option>
                                    <option value="2000-3000">2000元-3000元/月</option>
                                    <option value="3000-4000">3000元-4000元/月</option>
                                    <option value="4000-5000">4000元-5000元/月</option>
                                    <option value="5000-6000">5000元-6000元/月</option>
                                    <option value="6000-7000">6000元-7000元/月</option>
                                    <option value="7000-8000">7000元-8000元/月</option>
                                    <option value="8000-9000">8000元-9000元/月</option>
                                    <option value="9000-10000">9000元-10000元/月</option>
                                    <option value="10000-1000000">10000元/月以上</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-success btn-block no-radius font-weight-bold">SEARCH
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- End Main Slider With Form -->
    <!-- Properties by City -->
    <section class="section-padding bg-white" style="padding: 50px;">
        <div class="section-title text-center mb-5">
            <h2>推荐城市</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="card bg-dark text-white card-overlay">
                        <a href="/house?cityId=1">
                            <img class="card-img" src="/static/front/img/overlay/1.png" alt="Card image">
                            <div class="card-img-overlay">
                                <h3 class="card-title text-white">北京</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card bg-dark text-white card-overlay">
                        <a href="/house?cityId=2">
                            <img class="card-img" src="/static/front/img/overlay/2.png" alt="Card image">
                            <div class="card-img-overlay">
                                <h3 class="card-title text-white">上海</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card bg-dark text-white card-overlay">
                        <a href="/house?cityId=3">
                            <img class="card-img" src="/static/front/img/overlay/3.png" alt="Card image">
                            <div class="card-img-overlay">
                                <h3 class="card-title text-white">广州</h3>
                            </div>
                        </a>
                        .
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="card bg-dark text-white card-overlay">
                        <a href="/house?cityId=4">
                            <img class="card-img" src="/static/front/img/overlay/4.png" alt="Card image">
                            <div class="card-img-overlay">
                                <h3 class="card-title text-white">深圳</h3>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Properties by City -->
    <!-- Properties List -->
    <section class="section-padding"  style="padding: 50px;">
        <div class="section-title text-center mb-5">
            <h2 th:if="${session.city != null}">[[${session.city.cityName}]]地区新房推荐</h2>
            <h2 th:if="${session.city == null}">新房推荐</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4" th:each="house : ${latestPostList}">
                    <div class="card card-list">
                        <a th:href="@{'/house/'+${house.id}}">
                            <span class="badge badge-success" th:if="${house.houseStatus == 0}">未租出</span>
                            <span class="badge badge-secondary" th:if="${house.houseStatus == 1}">已租出</span>

                            <img class="card-img-top" th:src="${house.houseThumbnail}" >
                            <div class="card-body">
                                <h5 class="card-title">[[${house.houseTitle}]]</h5>
                                <h6 class="card-subtitle mb-2 text-muted"><i class="mdi mdi-home-map-marker"></i>
                                    [[${house.city.cityName}]]
                                </h6>
                                <h2 class="text-success mb-0 mt-3">
                                    ¥[[${house.monthPrice}]] <small>/月</small>
                                </h2>
                            </div>
                            <div class="card-footer">
                                <span><i class="mdi mdi-sofa"></i> 卧室 : <strong>[[${house.roomCount}]]</strong></span>
                                <span><i class="mdi mdi-scale-bathroom"></i> 洗手间 : <strong>[[${house.toiletCount}]]</strong></span>
                                <span><i
                                        class="mdi mdi-move-resize-variant"></i> 面积 : <strong>[[${house.area}]] m²</strong></span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Properties List -->

    <div th:replace="home/module/_footer"></div>
